<template>
  <div>
    <div style="font-size:40px; margin-bottom:20px">我的课表</div>

    <div class="container">
      <div class="weeks-Div">
        <div class="showTime-Div">{{ startTime }} 至 {{ endTime }}</div>
        <div class="weekNum-Div">现在是第{{ weekNum }}周</div>
        <div class="time-controller">
          <el-button-group>
            <el-button type="primary" icon="el-icon-arrow-left" @click="changeweekNum(-1)"></el-button>
            <el-button round class="date-btn">第{{ weekNum }}周</el-button>
            <el-button type="primary" icon="el-icon-arrow-right" @click="changeweekNum(1)"></el-button>
          </el-button-group>
        </div>
      </div>
      <div class="table-Div">
        <table class="course-Table">
          <thead>
            <tr>
              <th></th>
              <th>周日</th>
              <th>周一</th>
              <th>周二</th>
              <th>周三</th>
              <th>周四</th>
              <th>周五</th>
              <th>周六</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, courseNum) in courseStartTime" :key="item.startTime">
              <td>
                <p>{{ item.num }}</p>
                <p>{{ item.startTime }}</p>
              </td>
              <!-- <template v-for="(item2,weekNum) in courseTableArray[courseNum]"> -->
              <!-- <template v-for="weekNum in 7">
                <td
                  :rowspan="mergeRow(weekNum-1,courseNum)? 2:''"
                  :key="courseNum+'|'+weekNum"
                  :style="[{display:mergeDisplay(weekNum-1,courseNum)?'none':''}]"
                >
                  <div
                    class="cell-Div"
                    :style="[
                  { background: courseTableArray[courseNum][weekNum]==0?'#d91c43':'#FFFFFF'},
                  { color: '#fff'},
                  { borderRadius:'15px'},
                  { padding: '12px'},
                  { height: '100%'}]"
                  >
                    <p>{{courseTableArray[courseNum][weekNum]}}</p>
                  </div>
                </td>
              </template> -->
              <!-- :rowspan="((courseTableArray[courseNum][weekNum]!=0)&&
                (courseTableArray[courseNum][weekNum]==courseTableArray[courseNum+1][weekNum]))?2:''" -->
              <td v-for="(item2, weekNum) in courseTableArray[courseNum]" :key="weekNum"
                :rowspan="(courseTableArray[courseNum][weekNum] != 0) ? courseTableArray[courseNum][weekNum].numOfCourse : ''"
                :style="[{
                  display: courseTableArray[courseNum][weekNum] == 1 ? 'none' : ''
                }]">
                <div class="course-Div" v-if="courseTableArray[courseNum][weekNum] != 0" :style="[
                  { background: getRandomColor() },
                  { color: 'black' },
                  { borderRadius: '15px' },
                  { padding: '12px' },
                  { height: '100%' },
                ]">
                  {{ courseTableArray[courseNum][weekNum].courseName }}
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
export default {

  created() {
    this.getSomeUserInfo()
    this.getweekNum()
  },

  data() {
    return {
      userId: 0,
      startTime: "2022-09-04",
      endTime: "2023-01-07",
      weekNum: 0,
      //后端传进来的课程列表
      courseList: [
      ],

      //用于产生表格
      courseTableArray: [
        [0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0],
      ],
      courseStartTime: [
        { num: "第一节", startTime: "8:00" },
        { num: "第二节", startTime: "8:50" },
        { num: "第三节", startTime: "9:50" },
        { num: "第四节", startTime: "10:40" },
        { num: "第五节", startTime: "11:30" },
        { num: "第六节", startTime: "14:05" },
        { num: "第七节", startTime: "14:55" },
        { num: "第八节", startTime: "15:45" },
        { num: "第九节", startTime: "16:40" },
        { num: "第十节", startTime: "17:30" },
        { num: "第十一节", startTime: "18:30" },
        { num: "第十二节", startTime: "19:20" },
        { num: "第十三节", startTime: "20:10" },
      ],
      weekTable: {},
      colorList: [
        "#c9e3fd",
        "#fdc9cc",
        "#e2fdc9",
        "#abf1fc",
        "#e1d2fe",
        "#fed7f7",
        "#d7feec",
        "#fdd3d3",
      ]
    };
  },
  methods: {
    getweekNum() {
      let timeDiff = moment().diff(moment(this.startTime), "days")
      this.weekNum = parseInt(timeDiff / 7) + 1
    },
    changeweekNum(num) {
      this.weekNum = this.weekNum + num
      for(var i = 0;i<this.courseTableArray.length;i++){
        for(var j=0;j<this.courseTableArray[0].length;j++){
          this.courseTableArray[i][j] = 0
        }
      }
      this.courseListToTable()
    },
    getSomeUserInfo() {
      this.$axios.get("http://localhost:8000/getUserInfo", {
        headers: {
          Authorization: sessionStorage.getItem('access-admin')
        }
      })
        .then(res => {
          this.userId = res.data.id
          this.getUserCourseList()
        })
        .catch(err => {
          console.log(err)
          this.$message.error(err.response.data.message)
        })
    },
    getUserCourseList() {
      this.$axios.get("http://localhost:8000/course/select/" + this.userId, {
        headers: {
          Authorization: sessionStorage.getItem('access-admin')
        }
      })
        .then(res => {
          this.courseList = res.data
          this.courseListToTable()
          this.$forceUpdate()
        })
        .catch(err => {
          console.log(err)
          this.$message.error(err.response.data.message)
        })
    },
    mergeRow(weekNum, courseNum) {
      if (this.courseTableArray[courseNum][weekNum] == 0) {
        return false;
      }
      if (
        this.courseTableArray[courseNum][weekNum] ===
        this.courseTableArray[courseNum + 1][weekNum]
      ) {
        return true;
      }
      return false;
    },
    mergeDisplay(weekNum, courseNum) {
      if (courseNum == 0) {
        return false;
      }
      if (
        this.courseTableArray[courseNum][weekNum] ===
        this.courseTableArray[courseNum - 1][weekNum]
      ) {
        return true;
      }
      return false;
    },
    courseListToTable() {
      for (var i = 0; i < this.courseList.length; i++) {
        var str1 = this.courseList[i].period.split('-');
        var lastweek = parseInt(str1[1])
        if (this.weekNum <= lastweek) {
          var str = this.courseList[i].time.split('-');
          var weekNum = parseInt(str[0]);
          var startNum = parseInt(str[1]);
          var endNum = parseInt(str[2]);

          this.courseTableArray[startNum - 1][weekNum] = {
            courseId: this.courseList[i].courseId,
            courseName: this.courseList[i].courseName,
            numOfCourse: endNum - startNum + 1,
          }
          for (var j = startNum; j < endNum; j++) {
            this.courseTableArray[j][weekNum] = 1;
          }
        }else{
          console.log("没进入循环")
          continue
        }
      }
      console.log(this.courseTableArray )
    },
    //随机获取颜色
    getRandomColor() {
      let colorList = this.colorList;
      let colorRandom = Math.floor(Math.random() * colorList.length + 1) - 1;
      let color;
      for (let i = 0; colorList.length > i; i++) {
        if (i == colorRandom) {
          color = colorList[i];
        }
      }
      return color;
    },
  },
};
</script>


<style scoped lang="scss">
.container {
  width: 1000px;
  margin: 0 auto;

  .weeks-Div {
    display: flex;
    margin-top: 50px;
    margin-bottom: 50px;
    background-color: #e2f0fd;

    .showTime-Div {
      flex: 1;
      margin-top: 10px;
    }

    .weekNum-Div {
      flex: 1;
      margin-top: 10px
    }
  }

  .course-Table {
    height: 50%;
    table-layout: fixed;
    border-collapse: collapse; //设置表格的边框是否被合并为一个单一的边框
    text-align: center;
    color: #333333;
    font-weight: 400;
    font-size: 18px;
    margin: 0 auto;

    thead {
      height: 50px;

      th {
        border: 2px solid rgba(27, 100, 240, 0.1);
      }
    }

    tbody {

      // height: calc(100% - 2px) / 7;
      td {
        height: 0px;
        padding: 12px;
        border: 2px solid rgba(27, 100, 240, 0.1);
        width: 100px;

        .course-Div {
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
      }
    }
  }
}
</style>